<template>
  <w-vertical>
    <section>
      <h2>字体图标</h2>
      <p>调用范例: <var>&lt;w-img src=".f-i .f-i-check"&gt;&lt;/w-img&gt;</var> <var>&lt;i class="f-i f-i-check"&gt;&lt;/i&gt;</var></p>
    </section>
    <w-album gap=10 style="padding: 10px">
      <w-img v-for="item in fonts" class="x-fi" :src="'.f-i .' + item" :text="item" :vertical="false" />
    </w-album>
    <section>
      <h2>SVG图标</h2>
      <p>调用范例: <var>&lt;w-img src="#f-svg-loading"&gt;&lt;/w-img&gt;</var></p>
    </section>
    <w-album gap=10 style="padding: 10px">
      <w-img v-for="item in svgs" class="x-fi" :src="item" :text="item" :vertical="false" />
    </w-album>
    <div>&nbsp;</div>
  </w-vertical>
</template>

<script>
  export default {
    data() {
      let font = `.f-i-long-arrow-left,.f-i-long-arrow-right,.f-i-long-arrow-up,.f-i-long-arrow-down,.f-i-long-arrow-top,.f-i-long-arrow-bottom,
        .f-i-angle-left,.f-i-angle-right,.f-i-angle-up,.f-i-angle-down,.f-i-angle-first,.f-i-angle-last,.f-i-angle-double-left,.f-i-angle-double-right,
        .f-i-angle-double-up,.f-i-angle-double-down,.f-i-angle-single-left,.f-i-angle-single-right,.f-i-angle-single-up,.f-i-angle-single-down,
        .f-i-caret-left,.f-i-caret-right,.f-i-caret-up,.f-i-caret-down,.f-i-alert-warning,.f-i-alert-question,.f-i-alert-info,.f-i-alert-success,.f-i-top,
        .f-i-rotate-left,.f-i-rotate-right,.f-i-folder,.f-i-folder-full,.f-i-folder-open,.f-i-folder-open-full,.f-i-file,.f-i-file-full,.f-i-layout-list,
        .f-i-layout-grid,.f-i-comment,.f-i-comment-full,.f-i-thumbs-up,.f-i-thumbs-up-full,.f-i-read,.f-i-read-full,.f-i-search-square,.f-i-post-create,
        .f-i-user,.f-i-edit,.f-i-view,.f-i-favor,.f-i-trash,.f-i-check,.f-i-ellipsis,.f-i-upload-image,.f-i-upload,.f-i-date,.f-i-calendar,.f-i-minus,.f-i-plus,
        .f-i-minus-square,.f-i-plus-square,.f-i-search,.f-i-star-empty,.f-i-star-half,.f-i-star-full,.f-i-dialog-max,.f-i-dialog-min,.f-i-dialog-restore,
        .f-i-close,.f-i-mail,.f-i-qq`
      let svg = `#f-svg-loading,#f-svg-loading-1,#f-svg-loading-2,#f-svg-loading-3`
      return {
        fonts: font.split(','),
        svgs: svg.split(','),
      }
    }
  }
</script>

<style>
  .x-fi {
    width: 240px;
    padding: 5px 10px;
    font-family: verdana;
  }
  .x-fi.z-hv {
    background: #f5f5f5;
  }
  .x-fi .w-img-icon {
    font-size: 32px;
  }
  .x-fi .w-img-description {
    color: #777;
  }
</style>
